<template>
  <view class="min-h-[100vh]" :style="themeColor()">
    <view class="fixed left-0 right-0 top-0 product-warp bg-[#2F2F2F] px-[30rpx]">
      <view class="py-[14rpx] flex items-center justify-between">
        <view class="flex-1 flex items-center h-[64rpx] bg-[#F6F8F8] rounded-[33rpx] px-[32rpx] position-r">
          <text class="nc-iconfont nc-icon-sousuo-duanV6xx1 text-[32rpx] ml-[18rpx] !text-[#999]" @click="searchTypeFn('all')"></text>
          <u-input class="flex-1" maxlength="50" v-model="goods_name" @confirm="searchTypeFn('all')" placeholder="请搜索您想要的商品" placeholderClass="text-[#a5a6a6] text-[26rpx]" fontSize="26rpx"  clearable border="none"></u-input>
          <image src="@/image/go-button.png" style="height: 101%;position: absolute;width: 126rpx;right: -2rpx;top: 0" @click="searchTypeFn('all')"/>
        </view>
<!--        <view :class="['nc-iconfont text-[34rpx] text-[#666]', listType ? 'nc-icon-erweimaV6xx' : 'nc-icon-yingyongliebiaoV6xx']" @click="listIconBtn"></view>-->
      </view>
      <view class="flex justify-between tems-center py-[22rpx] px-[20rpx]">
        <view class=" flex items-center justify-between text-[24rpx] text-[#fff] flex-1">
          <text  :class="{ 'text-[#fff] ': searchType == 'all' }" @click="searchTypeFn('all')">综合排序</text>
          <view class="flex items-center" :class="{ 'text-[#fff]': searchType == 'sale_num' }" @click="searchTypeFn('sale_num')">
            <text class="mr-[4rpx]">销量</text>
            <text v-if="sale_num == 'asc'" class="text-[18rpx] text-[#666] nc-iconfont nc-icon-a-xiangshangV6xx1"></text>
            <text  v-else class="text-[18rpx] text-[#666] nc-iconfont nc-icon-a-xiangxiaV6xx1"></text>
          </view>
          <view class="flex items-center" :class="{'text-[#fff]': searchType == 'price' }" @click="searchTypeFn('price')">
            <text class=" mr-[4rpx]">价格</text>
            <text v-if="price == 'asc'" class="text-[18rpx] text-[#666] nc-iconfont nc-icon-a-xiangshangV6xx1"></text>
            <text v-else class="text-[18rpx] text-[#666] nc-iconfont nc-icon-a-xiangxiaV6xx1"></text>
          </view>
        </view>
      </view>
    </view>

    <mescroll-body ref="mescrollRef" top="56px" bottom="50px" @init="mescrollInit" :down="{ use: false }" @up="getAllAppListFn">
      <view v-if="articleList.length" :class="['sidebar-marign', !listType ? 'flex justify-between flex-wrap' : '']">
        <template v-for="(item, index) in articleList">
          <template v-if="listType" :key="item.app_id">
            <view class="bg-white flex p-[20rpx] rounded-[16rpx] overflow-hidden mt-[20rpx]" :class="{ 'mb-[20rpx]': (index+1) == articleList.length}" @click="toDetail(item.goods_id)">
              <u--image class="rounded-[10rpx] overflow-hidden" width="190rpx" height="190rpx" :src="img(item.goods_cover_thumb_mid ? item.goods_cover_thumb_mid : '')" model="aspectFill">
                <template #error>
                  <image class="w-[190rpx] h-[190rpx] rounded-[10rpx] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
                </template>
              </u--image>
              <view class="flex-1 flex flex-col ml-[20rpx] py-[6rpx]">
                <!--                <view class="text-[28rpx] text-[#303133] leading-[40rpx]  multi-hidden mb-[10rpx]">{{ item.esGoods.name }}</view>-->
                <view class="mt-auto flex justify-between items-baseline">
                  <view class="text-[var(--price-text-color)] price-font flex items-baseline">
                    <text class="text-[26rpx] font-500">￥</text>
                    <text class="text-[36rpx] font-500">{{ goodsPrice(item).toFixed(2).split('.')[0] }}</text>
                    <text class="text-[24rpx] font-500">.{{ goodsPrice(item).toFixed(2).split('.')[1] }}</text>
                    <image class="h-[24rpx] w-[72rpx] ml-[6rpx]" v-if="priceType(item) == 'member_price'" :src="img('addon/shop/VIP.png')" mode="heightFix" />
                    <image class="h-[24rpx] w-[72rpx] ml-[6rpx]" v-if="priceType(item) == 'discount_price'" :src="img('addon/shop/discount.png')" mode="heightFix" />
                  </view>
                  <text class="text-[22rpx] text-[#999]">已售{{ item.sale_num }}{{ item.unit }}</text>
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="goods-item-style-two flex flex-col bg-[#fff] box-border rounded-[12rpx] overflow-hidden mt-[20rpx]" @click="toDetail(item.goods_id)">
              <u--image width="100%" height="350rpx" :src="img(item.goods_cover_thumb_mid ? item.goods_cover_thumb_mid : '')" model="aspectFill">
                <template #error>
                  <image class="w-[100%] h-[350rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
                </template>
              </u--image>
              <view class="px-[16rpx] flex-1 pt-[16rpx] pb-[20rpx] flex flex-col justify-between bg-[#2F2F2F] position-r">
                <!--                <view class="text-[#303133] leading-[40rpx] text-[28rpx] multi-hidden">-->
                <!--                  {{ item.esGoods.name }}-->
                <!--                </view>-->
                <view class="flex justify-between flex-wrap items-baseline mt-[16rpx] mb-[15rpx]">
                  <view class="text-[var(--price-text-color)] price-font flex items-baseline">
                    <!--										<text class="text-[20rpx]  mr-[4rpx]">￥</text>-->
                    <!--										<text class="text-[36rpx] font-500">{{ item.goodsSku.price }}</text>-->

                    <text class="text-[26rpx] font-500">￥</text>
                    <text class="text-[36rpx] font-500">{{ goodsPrice(item).toFixed(2).split('.')[0] }}</text>
                    <text class="text-[24rpx] font-500">.{{ goodsPrice(item).toFixed(2).split('.')[1] }}</text>
                    <image class="h-[24rpx] ml-[6rpx]" v-if="priceType(item) == 'member_price'" :src="img('addon/shop/VIP.png')" mode="heightFix" />
                    <image class="h-[24rpx] ml-[6rpx]" v-if="priceType(item) == 'discount_price'" :src="img('addon/shop/discount.png')" mode="heightFix" />
                  </view>
                  <text class="text-[22rpx] text-[#999]">已售{{ item.sale_num }}{{ item.unit}}</text>
                </view>
              </view>
            </view>
          </template>
        </template>
      </view>
      <view class="mx-[var(--price-text-color)] mt-[20rpx] rounded-[16rpx] noData flex items-center justify-center dis_flex" v-if="!articleList.length && loading">
<!--        <mescroll-empty :option="{tip : '暂无商品'}"></mescroll-empty>-->
        <img src="@/image/goods/no_data.png" alt="" class="h-[242rpx] w-[297.44rpx]"/>
        <text class="text-[#999] text-[30rpx] mt-[20rpx]">暂无商品</text>
      </view>
    </mescroll-body>

    <tabbar />
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { t } from '@/locale'
import { redirect, img, getToken } from '@/utils/common';
import { getRebateGoodsList } from '@/addon/jiangsu_shop/api/rebate';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const categoryList = ref<Array<Object>>([]);
const articleList = ref<Array<any>>([]);
const coupon_id = ref<number | string>('');
const currGoodsCategory = ref<number | string>('');
const mescrollRef = ref(null);
const loading = ref<boolean>(false);
// 标签
const goods_name = ref("");
const price = ref("");
const sale_num = ref("");
const searchType = ref('all');
const isShow = ref(false)//输入框清除文字按钮
//列表类型
const listType = ref(false)
onLoad(async (option) => {
  currGoodsCategory.value = option.curr_goods_category || ''
  goods_name.value = option.goods_name || ''
  coupon_id.value = option.coupon_id || ''
})

interface mescrollStructure {
  num: number,
  size: number,
  endSuccess: Function,
  [propName: string]: any
}

const getAllAppListFn = (mescroll: mescrollStructure) => {
  loading.value = false;
  let data: object = {
    goods_category: currGoodsCategory.value,
    page: mescroll.num,
    limit: mescroll.size,
    keyword: goods_name.value,
    coupon_id: coupon_id.value,
    order: searchType.value === 'all' ? '' : searchType.value,
    sort: searchType.value == 'price' ? price.value : sale_num.value
  };
  getRebateGoodsList(data).then((res: any) => {
    let newArr = (res.data.data as Array<Object>);
    //设置列表数据
    if (Number(mescroll.num) === 1) {
      articleList.value = []; //如果是第一页需手动制空列表
    }
    articleList.value = articleList.value.concat(newArr);
    mescroll.endSuccess(newArr.length);
    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}

// 搜索
const searchTypeFn = (type) => {
  searchType.value = type;
  if ( type == 'all') {
    sale_num.value = '';
    price.value = '';
  }
  if ( type == 'price') {
    sale_num.value = '';
    if(price.value){
      price.value = price.value == 'asc' ? 'desc' : 'asc';
    }else{
      price.value = 'asc';
    }
  }
  if ( type == 'sale_num') {
    price.value = '';
    if(sale_num.value){
      sale_num.value = sale_num.value == 'asc' ? 'desc' : 'asc';
    }else{
      sale_num.value = 'asc';
    }
  }
  if (type == 'label') {
    sale_num.value = 'asc';
    price.value = 'asc';
  } else {
    articleList.value = [];

    getMescroll().resetUpScroll();
  }
}
//列表样式切换
const listIconBtn = () => {
  listType.value = !listType.value
}
const toDetail = (id: string | number) => {
  redirect({ url: '/addon/jiangsu_shop/pages/rebate/detail', param: { goods_id: id }, mode: 'navigateTo' })
}
onMounted(() => {
  setTimeout(() => {
    getMescroll().optUp.textNoMore = t("end");
  }, 500)
});

// 价格类型
const priceType = (data:any) =>{
  let type = "";
  if(data.is_discount && data.goodsSku.sale_price != data.goodsSku.price){
    type = 'discount_price'// 折扣
  }else if(data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
    type = 'member_price' // 会员价
  }else{
    type = ""
  }
  return type;
}
// 商品价格
const goodsPrice = (data:any) => {
  let price = "0.00";
  if (data.is_discount && data.goodsSku.sale_price != data.goodsSku.price) {
    price = data.goodsSku.sale_price ? data.goodsSku.sale_price : data.goodsSku.price // 折扣价
  } else if (data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
    price = data.goodsSku.member_price ? data.goodsSku.member_price : data.goodsSku.price // 会员价
  } else {
    price = data.goodsSku.price
  }
  return parseFloat(price);
}
</script>

<style lang="scss" scoped>
uni-page-body {
  background: #060606;
}
.scroll-view-wrap {
  word-break: keep-all;
}

.text-color {
  color: var(--primary-color);
}

.label-select {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: var(--primary-color-light);
}

:deep(.u-popup .u-transition) {
  top: 156rpx !important;
}

.product-warp {
  z-index: 99999;
}

:deep(.tab-bar-placeholder) {
  display: none !important;
}

:deep(.u-tabbar__placeholder) {
  display: none !important;
}
:deep(.u-input__content__clear){
  width: 28rpx;
  height: 28rpx;
  font-size: 28rpx;
  background-color: #999;
}
.noData{
  height: calc(100vh - 200rpx - 50px - constant(safe-area-inset-bottom));
  height: calc(100vh - 200rpx - 50px - env(safe-area-inset-bottom));
}
.goods-item-style-two{
  width: calc(50% - 10rpx);
}
.position-r {
  position: relative;
}
.box_bottom {
  height: 15rpx;
  width: 298rpx;
  position: absolute;
  bottom: 2rpx;
  right: 0;
  background: url("../../../../image/goods/box_bottom.png") no-repeat;
  background-size: 100% 100%;
}
:deep(.uni-input-input) {
  color: #999999 !important;
}
.dis_flex {
  flex-direction: column;
}
</style>